<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>订单详情</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css"/>
    <!-- Theme style -->
    <link rel="stylesheet" href="/dist/css/adminlte.min.css"/>
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css"/>
    <!-- jquery -->
    <script type="text/javascript" src="/plugins/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/plugins/layer/layer.js"></script>
    <script type="text/javascript" src="/dist/js/common.js"></script>
</head>
<body>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">商品订单详情</h3>
    </div>
    <table id="orderDetail" class="table table-hover">
        <tr>
            <td>商品名称</td>
            <td colspan="3" id="goodsName"></td>
        </tr>
        <tr>
            <td>商品图片</td>
            <td colspan="3"><img id="goodsImage" width="200" height="200"></td>
        </tr>
        <tr>
            <td>商品价格</td>
            <td colspan="3" id="goodsPrice"></td>
        </tr>
        <tr>
            <td>下单时间</td>
            <td colspan="3" id="orderTime"></td>
        </tr>
        <tr>
            <td>订单状态</td>
            <td id="orderStatus"></td>
            <td>
                <button class="btn btn-primary btn-block" id="payButton" type="submit">立即支付</button>
            </td>
        </tr>
        <tr>
            <td>收货人</td>
            <td colspan="2" id="receiveName"></td>
        </tr>
        <tr>
            <td>收货地址</td>
            <td colspan="2">江苏省苏州市慧湖大厦嘉图网络科技股份有限公司</td>
        </tr>
    </table>
</div>
</body>
<script>
    $(function () {
        getOrderDetail();
    });

    function getOrderDetail() {
        let orderId=g_getQueryString("orderId");
        $.ajax({
            url:"/order/detail",
            data:{
                orderId:orderId,
            },
            type:"GET",
            success:function (data) {
                if(data.code==200){
                    render(data.data);
                }else{
                    layer.msg(data.msg)
                }
            },
            error:function () {
                layer.msg("客户端请求错误")
            }
        })
    }

    function render(detail) {
        let goods=detail.goodsDTO;
        let order=detail.orderInfo;
        console.log(order.status);
        let user=detail.seckillUser;
        $("#goodsName").text(goods.goodsName);
        $("#goodsImage").attr("src",goods.goodsImg);
        $("#goodsPrice").text(order.goodsPrice);
        $("#orderTime").text(new Date(order.createDate).format("yyyy-MM-dd hh:mm:ss"));
        let orderStatus;
        if(order.status==0){
            orderStatus="未支付";
        }else if(order.status==1){
            orderStatus="已支付";
        }else if(order.status==2){
            orderStatus="已发货";
        }else if(order.status==3){
            orderStatus="已收货";
        }else{
            orderStatus="已完成";
        }
        $("#orderStatus").text(orderStatus);
        $("#receiveName").text(user.nickname)
    }
</script>
</html>